<template>
  <body>
  <div class="box">
    <h2>{{ taskInfo.TaskTitle }}</h2>
    <h2>{{ taskInfo.TaskDescription }}</h2>
    <h2>发布：{{ taskInfo.PublishTime }}</h2>
    <h2>截止：{{ taskInfo.Deadline }}</h2>
    <form class="input-box">
      <label>5位学号</label>
      <input id="studentCode_input_box" type="text"
             v-model="studentId"
             maxlength="5"
      />

    </form>
    <div class="btn-box">
      <div id="buttons">
        <button style="width: 250px" id="button_login" @click="login">开始作答</button>
      </div>
    </div>
  </div>
  </body>

</template>

<style scoped>

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url(/src/assets/bg.jpg) no-repeat;
  background-size: cover;
}

.box {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 350px;
  height: 380px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  background: rgba(50, 50, 50, 0.2);
}

.box > h2 {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
}

.box .input-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  margin-bottom: 10px;
}

.box .input-box > label {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.box .input-box > input {
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  height: 35px;
  width: 250px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  transition: 0.2s;
  outline: none;
  padding: 0 10px;
  letter-spacing: 1px;
}

.box .input-box > input:focus {
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.box .btn-box {
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.box .btn-box > a {
  font-size: 14px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  transition: 0.2s;
  width: 250px;
  text-align: end;
}

.box .btn-box > a:hover {
  color: rgba(255, 255, 255, 1);
}

.box .btn-box > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: start;
  margin-top: 20px;
}

.box .btn-box > div > button {
  width: 120px;
  height: 35px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  transition: 0.2s;
}

.box .btn-box > div > button:nth-of-type(2) {
  margin-left: 10px;
}

.box .btn-box > div > button:hover {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.3);
}

</style>


<script lang="ts" setup>
import {ref, computed} from 'vue';
import axios from "axios";
import {api_url, page_url} from "@/main";
import {useRoute} from "vue-router";

const studentId = ref('');

let taskInfo = ref({
  "TaskTitle": "",
  "TaskDescription": "",
  "PublishTime": "",
  "Deadline": ""
});

// 获取路由参数
const route = useRoute()

const taskId = computed(() => route.query.task_id)

if (taskId.value == '') {
  ElMessage.error('taskId有误')
}


// 发送get请求
axios.get(`${api_url}/tasks/get_info`, {
  params: {
    task_id: taskId.value,
  },
}).then((res) => {
  console.log(res.data);
  if (res.data.code === 200) {
    taskInfo.value = res.data.data;
    taskInfo.value.PublishTime = new Date(res.data.data.PublishTime).toLocaleString();
    taskInfo.value.Deadline = new Date(res.data.data.Deadline).toLocaleString();

    // 如果当前时间过了截止时间，则提示用户已截止
    if (new Date().getTime() > new Date(taskInfo.value.Deadline).getTime()) {
      ElMessage.error(
          {
            message: '已截止',
            duration: 0
          }
      )
      // 页面效果
      document.getElementById('studentCode_input_box').disabled = true;
      document.getElementById('button_login').disabled = true;
      document.getElementById('button_login').innerText = '已截止';
      document.getElementById('button_login').style.cursor = 'not-allowed';
    }
  } else {
    ElMessage.error(res.data.msg);
  }
}).catch((error) => {
  // 处理 Axios 抛出的错误
  console.error('获取任务信息时发生错误:', error);
  if (error.response && error.response.data) {
    ElMessage.error({
          message: error.response.data.msg || '服务器内部错误',
          duration: 0
        }
    );
  } else {
    ElMessage.error(
        {
          message: '无法连接到服务器，请稍后再试',
          duration: 0
        }
    );
  }
});


const login = () => {
  if (studentId.value.length != 5 || studentId.value == '') {
    ElMessage.error('学号格式错误')
    return
  }
  if (!taskId.value) {
    ElMessage.error('taskId有误')
    return
  }

  // 发送网络请求检查taskId是否存在

  window.location.href = `${page_url}/tasks/detail?student_id=${studentId.value}&task_id=${taskId.value}`;
}


</script>